import { defineConfig, presetWind4, presetAttributify, presetIcons } from 'unocss'

export default defineConfig({
  shortcuts: {
    'flex-center': 'flex justify-center items-center',
    'card': 'bg-white/90 border border-[rgba(59,130,246,0.4)] rounded-[12px] shadow-[0_4px_12px_rgba(0,0,0,0.02)] p-6 transition-all duration-300 hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)] hover:translate-y-[-2px]',
  },
  presets: [
    presetWind4(), // 使用presetWind3替代presetWind,presetWind已废弃
    presetAttributify(),
    presetIcons(),
  ],
  // 主题配置，与style.css中的CSS变量保持一致
  theme: {
    colors: {
      primary: '#3b82f6', // --color-accent
      light: 'rgba(255, 255, 255, 0.96)', // --color-light
      mid: 'rgba(226, 232, 240, 0.94)', // --color-mid
      dark: 'rgba(51, 65, 85, 0.92)', // --color-dark
      hover: 'rgba(59, 130, 246, 0.15)', // --color-hover
      border: 'rgba(59, 130, 246, 0.4)', // --color-border
      bg: 'rgba(248, 250, 252, 0.96)', // --color-bg
      main: 'rgba(255, 255, 255, 0.90)', // --color-main
      accent: 'rgba(59, 130, 246, 1)', // --color-accent
    },
    borderRadius: {
      small: '5px',
      medium: '8px',
      large: '12px',
      full: '50%'
    },
    boxShadow: {
      card: '0 4px 12px rgba(0, 0, 0, 0.02)',
      'card-hover': '0 6px 16px rgba(0, 0, 0, 0.04)'
    }
  },
  // 添加安全列表以确保动态生成的类名被正确识别
  // UnoCSS默认通过静态分析来识别类名，动态生成的类名需要手动添加到安全列表
  safelist: [
    // 布局相关类
    'flex', 'flex-col', 'flex-row', 'items-center', 'items-start', 'items-end',
    'justify-center', 'justify-between', 'justify-start', 'justify-end',
    'w-full', 'h-full', 'min-h-full', 'overflow-hidden', 'overflow-y-auto', 'overflow-x-auto',
    'p-0', 'p-4', 'p-6', 'px-4', 'px-5', 'py-2', 'py-3', 'py-4', 'm-0', 'mb-1', 'mb-2', 'mb-4', 'mb-6', 'mb-8', 'mt-1',
    'mr-1', 'mr-2', 'mr-3', 'ml-1', 'ml-2', 'ml-10', 'ml-12', 'gap-2', 'gap-3', 'gap-4', 'gap-6',
    // 主题颜色类
    'bg-primary', 'bg-primary/10', 'bg-primary/40', 'bg-primary/90',
    'bg-white', 'bg-white/90', 'bg-dark', 'bg-hover',
    'text-primary', 'text-secondary', 'text-accent', 'text-white',
    'border', 'border-primary/40', 'border-border', 'border-r', 'border-b', 'border-l-3', 'border-b-2',
    // 交互效果类
    'cursor-pointer', 'transition-all', 'transition-transform', 'transition-colors',
    'duration-150', 'duration-200', 'duration-300',
    'hover:bg-primary/10', 'hover:bg-gray-100', 'hover:bg-gray-50',
    'hover:shadow-[0_6px_16px_rgba(0,0,0,0.04)]',
    'hover:translate-y-[-2px]', 'hover:text-[#334155]', 'hover:text-red-500',
    // 形状和阴影类
    'rounded-[12px]', 'rounded-full', 'rounded-sm', 'rounded-md', 'rounded-lg', 'rounded-t-lg',
    'shadow-[0_4px_12px_rgba(0,0,0,0.02)]', 'shadow-[0_6px_16px_rgba(0,0,0,0.04)]', 'shadow-sm', 'shadow-none',
    // 文本样式类
    'text-center', 'text-left', 'text-right', 'text-xl', 'text-lg', 'text-base', 'text-sm', 'text-xs',
    'font-medium', 'font-bold', 'font-normal', 'font-semibold', 'uppercase',
    // 背景图案类
    'grid-pattern', 'bg-[radial-gradient(rgba(0,0,0,0.05)_1px,transparent_1px)]', 'bg-[size:20px_20px]',
    // 特殊效果类
    'backdrop-blur-[20px]', '-webkit-backdrop-filter-blur-[20px]',
    // 动态菜单类
    'relative', 'absolute', 'top-0', 'left-0', 'bottom-0',
    'w-64', 'h-16', 'h-12', 'h-48',
    // 数据卡片相关类
    'bg-blue-50', 'bg-blue-100', 'bg-green-50', 'bg-green-100', 'bg-yellow-50', 'bg-red-50', 'bg-red-100', 'bg-purple-50', 'bg-purple-100', 'bg-pink-50',
    'text-blue-500', 'text-green-500', 'text-yellow-500', 'text-red-500',
    'text-purple-500', 'text-pink-500', 'text-orange-500',
    // 表格相关类
    'table-auto', 'table', 'border-collapse', 'w-full', 'divide-y', 'divide-gray-200',
    // 激活状态类
    'active',
    // 按钮相关类
    'btn-primary', 'btn-secondary', 'btn-hover',
    // 自定义颜色类
    'bg-[rgba(59,130,246,0.15)]', 'bg-[#2563eb]', 'bg-[#3b82f6]',
    'border-[rgba(59,130,246,0.4)]', 'border-[#3b82f6]',
    'text-[#3b82f6]', 'text-[#64748b]', 'text-[#334155]', 'text-[#334155]', 'text-[#64748b]',
    // 其他类
    'h-screen', 'w-8', 'w-12', 'h-8', 'h-12', 'inline-flex', 'leading-5',
    'grid', 'grid-cols-1', 'md:grid-cols-3', 'md:grid-cols-2',
    'whitespace-nowrap', 'bg-gray-200', 'bg-gray-50', 'bg-gray-100',
    'text-red-500', 'text-green-800', 'text-gray-600', 'text-gray-800', 'text-gray-900',
    // Tab栏相关类
    'space-x-1', 'space-x-2', 'space-y-1', 'space-y-2', 'space-y-6',
    'mx-0.5', 'mx-1', 'cursor-pointer',
    'border-b-2', 'border-[#3b82f6]', 'border-[rgba(59,130,246,0.4)]',
    'shadow-sm', 'bg-white/90', 'bg-gray-50', 'bg-gray-100',
    'text-[#3b82f6]', 'text-[#64748b]', 'text-[#334155]',
    'hover:bg-gray-50', 'hover:text-red-500', 'hover:bg-red-50'
  ]
})